import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:ride_rex/generated/assets.dart';
import 'package:ride_rex/standard/app_colors.dart';
import 'package:ride_rex/ui/common_dialogs.dart';
import 'package:ylm_ui_kit/ylm_ui_kit.dart';

import '../../ui/common_home_scaffold.dart';
import 'home_logic.dart';
import 'landmark_bean.dart';

class HomePage extends StatefulWidget {
  const HomePage(this.logic, {Key? key}) : super(key: key);

  final HomeLogic logic;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
    widget.logic.init();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return _HomePage();
  }

  @override
  bool get wantKeepAlive => true;
}

class _HomePage extends GetView<HomeLogic> {
  _HomePage();

  final double titlePaddingTop = 0;
  final double titleHeight = 33.w;
  final double topHeight = 257.w;
  final double topPaddingTop = 18.w;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeLogic>(
      builder: (logic) {
        return BaseScaffold(
          hideBackBtn: true,
          child: Container(
            decoration: CommonDecoration.getShapeDecoration(
              gradient: AppColors.primaryGradient,
              radius: 0,
            ),
            alignment: Alignment.center,
            child: Column(
              children: [
                _buildTitle().paddingTop(ScreenUtil().statusBarHeight + titlePaddingTop),
                _buildTop().paddingTop(topPaddingTop),
                _buildBottom(),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildTitle() {
    return Assets.svgHomeTitle.toSvg(width: 260.w, height: titleHeight);
  }

  Widget _buildTop() {
    return SizedBox(
      width: 343.w,
      height: topHeight,
      child: Stack(
        children: [
          ///背景图
          const IconWidget.image(Assets.pngHomeTopBg).positioned(top: 0, left: 0, right: 0, bottom: 0),

          ///tip
          const TextWidget.moreLine(
            text: 'Tip：Click on it to view\nthe unlocking conditions.',
            fontSize: 12,
            color: AppColors.primary,
            fontWeight: FontWeight.bold,
          ).positioned(right: 30.w, top: 45.w),

          ///进度条
          Stack(
            children: [
              Container(
                width: 311.w,
                height: 16.w,
                alignment: Alignment.center,
                decoration: CommonDecoration.getShapeDecoration(bg: '#89D6F8'.toColor, radius: 16.w),
              ),
              Container(
                width: controller.unlockCount > 0 ? 311.w / 6 * controller.unlockCount : 0,
                height: 16.w,
                alignment: Alignment.center,
                decoration: CommonDecoration.getShapeDecoration(bg: Colors.white, radius: 16.w),
              ),
            ],
          ).positioned(left: 16.w, top: 146.w),

          ///图标
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: List.generate(
              controller.list.length,
              (index) {
                LandmarkBean bean = controller.list[index];
                bool lock = bean.unlock == 0;
                return Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      width: 46.w,
                      height: 46.w,
                      decoration: CommonDecoration.getShapeDecoration(bg: Colors.white, radius: 46.w),
                      alignment: Alignment.center,
                      child: IconWidget.image('assets/png/${bean.medalIcon}.png', width: 31.w, height: 29.w),
                    ),
                    if (lock)
                      Container(
                        width: 46.w,
                        height: 46.w,
                        decoration: CommonDecoration.getShapeDecoration(
                          bg: Colors.black.withOpacity(0.4),
                          radius: 46.w,
                        ),
                      ),
                    if (lock) Assets.svgLockGreen.toSvg(width: 12.w),
                  ],
                );
              },
            ).toList(),
          ).positioned(left: 12.w, right: 12.w, bottom: 25.w, height: 46.w),
        ],
      ),
    );
  }

  Widget _buildBottom() {
    double h = ScreenUtil().screenHeight -
        topHeight -
        titleHeight -
        titlePaddingTop -
        topPaddingTop -
        ScreenUtil().statusBarHeight -
        ScreenUtil().bottomBarHeight * 0.5 -
        CommonHomeScaffold.itemsHeight;

    double perH = ((h - 160.w) / 3).ceilToDouble();

    final double _top = 25.w;

    return SizedBox(
      height: h, //50.w是底部tab的高度
      width: ScreenUtil().screenWidth,
      child: Stack(
        children: [
          CustomPaint(painter: HomePainter(perH)),
          ...controller.list.map((e) {
            int index = controller.list.indexOf(e);
            double? left;
            double? right;
            double? top;
            double? bottom;

            if (index == 0) {
              left = 32.w;
              top = _top;
            } else if (index == 1) {
              right = 70.w;
              top = _top;
            } else if (index == 2) {
              left = 160.w;
              top = perH + _top;
            } else if (index == 3) {
              left = 70.w;
              top = perH * 2 + _top;
            } else if (index == 4) {
              right = 28.w;
              top = perH * 2 + _top;
            } else if (index == 5) {
              right = 28.w;
              top = perH * 3.5 + _top;
            }

            return Positioned(
              left: left,
              right: right,
              top: top,
              bottom: bottom,
              child: ButtonWidget(
                onTap: () => CommonDialogs.showMedal(e),
                hasInkWell: false,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      decoration: CommonDecoration.getShapeDecoration(
                        borderWidth: 3.w,
                        borderColor: Colors.white,
                        radius: 60.w,
                      ),
                      child: IconWidget.image('assets/png/${e.medalIcon}.png', size: 60.w),
                    ),
                    if (e.unlock == 0) ...[
                      Container(
                        decoration: CommonDecoration.getShapeDecoration(
                          bg: Colors.black.withOpacity(0.4),
                          radius: 66.w,
                        ),
                        width: 66.w,
                        height: 66.w,
                      ),
                      Assets.svgLockGreen.toSvg(width: 18.w),
                    ]
                  ],
                ),
              ),
            );
          }).toList(),
        ],
      ),
    );
  }
}

class HomePainter extends CustomPainter {
  HomePainter(this.height);

  final double height;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..style = PaintingStyle.stroke
      ..color = '#B3E8F7'.toColor
      ..strokeCap = StrokeCap.round
      ..strokeJoin = StrokeJoin.round
      ..strokeWidth = 18;

    Path path = Path();

    final Offset start = Offset(66.w, 60.w);
    final Offset lineOneEnd = Offset(ScreenUtil().screenWidth - 60.w - 44.w - start.dx, start.dy);

    canvas.translate(start.dx, start.dy);

    ///第一条横线
    path.lineTo(lineOneEnd.dx, 0);

    ///第一个半圆
    final Offset p1 = Offset(ScreenUtil().screenWidth - 120.w, height / 2);
    final Offset p2 = Offset(lineOneEnd.dx, height);
    path.quadraticBezierTo(p1.dx, p1.dy, p2.dx, p2.dy);

    ///第二条横线
    path.lineTo(44.w, height);

    ///第二个半圆
    final Offset p3 = Offset(-15.w, height * 1.5);
    final Offset p4 = Offset(44.w, height * 2);
    path.quadraticBezierTo(p3.dx, p3.dy, p4.dx, p4.dy);

    ///第三条横线
    path.lineTo(lineOneEnd.dx + 44.w, height * 2);

    ///第四条竖线
    path.lineTo(lineOneEnd.dx + 44.w, height * 3.5);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}
